import React, { Component } from 'react';
import { Card, Col, Row, Statistic, Table } from 'antd';
import Basic from '@/pages/operate/tradeflow/components/Temp';
import ServiceOrderDetail from './components/ServiceOrderDetail';


let serviceOrderDetail: any = {};

const handleOpen = () => {
  if (serviceOrderDetail) serviceOrderDetail.handleOpen();
};

const columns = [
  {
    title: '服务号',
    dataIndex: 'serviceNo',
    key: 'serviceNo',
    render(val: React.ReactNode) {
      return <a onClick={() => { handleOpen() }}>{val}</a>;
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '跟进人',
    dataIndex: 'merchandiser',
    key: 'merchandiser',
  },
  {
    title: '跟进时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
  },
];

const dataSource = [
  {
    key: '1',
    serviceNo: 'S0000000001',
    status: '询问中',
    merchandiser: 'Ron',
    updateTime: '2019-09-24 10:25',
  },
  {
    key: '2',
    serviceNo: 'S0000000002',
    status: '待报价',
    merchandiser: '吴文博',
    updateTime: '2019-09-24 10:23',
  },
];


class LocalModule extends Component {
  state = {};



  render() {
    return (
      <div>
        <Row gutter={16}>
          <Col sm={6} style={{ paddingBottom: 16 }}>
            <Card bordered={false}>
              <Statistic title="今日询盘" value={283} />
            </Card>
          </Col>
          <Col sm={6} style={{ paddingBottom: 16 }}>
            <Card bordered={false}>
              <Statistic title="订单" value={151} />
            </Card>
          </Col>
          <Col sm={6} style={{ paddingBottom: 16 }}>
            <Card bordered={false}>
              <Statistic title="转化率" value={30} precision={2} suffix="%" />
            </Card>
          </Col>
          <Col sm={6} style={{ paddingBottom: 16 }}>
            <Card bordered={false}>
              <Statistic title="异常" value={23} valueStyle={{ color: 'red' }} />
            </Card>
          </Col>
          <Col sm={8} style={{ paddingBottom: 16 }}>
            <Card bordered={false} title="（1）询盘" bodyStyle={{ padding: 1 }} extra={<a>更多</a>}>
              <Row>
                <Col span={24}>
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Basic />
                </Col>
              </Row>
            </Card>
          </Col>
          <Col sm={8} style={{ paddingBottom: 16 }}>
            <Card
              bordered={false}
              title="（2）订单确认"
              bodyStyle={{ padding: 1 }}
              extra={<a>更多</a>}
            >
              <Row>
                <Col span={24}>
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Basic />
                </Col>
              </Row>
            </Card>
          </Col>
          <Col sm={8} style={{ paddingBottom: 16 }}>
            <Card bordered={false} title="（3）派单" bodyStyle={{ padding: 1 }} extra={<a>更多</a>}>
              <Row>
                <Col span={24}>
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Basic />
                </Col>
              </Row>
            </Card>
          </Col>
          <Col sm={8} style={{ paddingBottom: 16 }}>
            <Card bordered={false} title="（4）跟单" bodyStyle={{ padding: 1 }} extra={<a>更多</a>}>
              <Row>
                <Col span={24}>
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Basic />
                </Col>
              </Row>
            </Card>
          </Col>
          <Col sm={8} style={{ paddingBottom: 16 }}>
            <Card bordered={false} title="（5）结算" bodyStyle={{ padding: 1 }} extra={<a>更多</a>}>
              <Row>
                <Col span={24}>
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Basic />
                </Col>
              </Row>
            </Card>
          </Col>
          <Col sm={8} style={{ paddingBottom: 16 }}>
            <Card bordered={false} title="（6）异常" bodyStyle={{ padding: 1 }} extra={<a>更多</a>}>
              <Row>
                <Col span={24}>
                  <Table
                    columns={columns}
                    dataSource={dataSource}
                    size="middle"
                    pagination={false}
                  ></Table>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <Basic />
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
        {/* eslint-disable-next-line no-return-assign */}
        <ServiceOrderDetail wrappedComponentRef={(inst: any) => (serviceOrderDetail = inst)}
                            {...serviceOrderDetail}
                            visible
        />
      </div>

    );
  }
}

export default LocalModule;
